// The navigation drawer has two types: standard and modal.
//
// modal (default)
// -----
// Modal navigation drawers block interaction with the rest of an app’s content
// with a scrim. They are elevated above most of the app’s UI and don’t affect
// the screen’s layout grid.
//
// standard
// --------
// Standard navigation drawers allow users to simultaneously access drawer
// destinations and app content. They are often co-planar with app content and
// affect the screen’s layout grid. They can be used on tablet and desktop only.
// On mobile, they switch to a modal behavior.

web-navigation-drawer {
  display: block;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 300;

  [data-drawer-container] {
    box-shadow: 2px 0 12px rgb(0 0 0 / 40%);
    // position: relative is needed here to keep the drawer above the scrim
    position: relative;
    transform: translateX(-110%);
    width: var(--web-navigation-drawer-width, fit-content);

    @include apply-utility('bg', 'core-bg');
  }
}

// This is the scrim that appears behind the navigation drawer when it is
// expanded.
web-navigation-drawer::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 40%);
  backdrop-filter: blur(5px);
  opacity: 0;
}

web-navigation-drawer[open] {
  pointer-events: auto;
  visibility: visible;
}

web-navigation-drawer[open]::before {
  opacity: 1;
}

web-navigation-drawer[open] [data-drawer-container],
web-navigation-drawer[open]:focus-within [data-drawer-container] {
  transform: none;
}

web-navigation-drawer[animating] [data-drawer-container] {
  transition: transform $global-transition-movement;
}
